<template>
  <div class="pang1">
    <div>页面1</div>
    <div>余额:{{ allPrice }}</div>
    <!-- 3.传递props，自定义属性，props是什么命名，自定义属性就是什么名 -->
    <!--@pay='payFn' 监听自定义事件 -->
    <GoodsItem
      v-for="(item, index) in list"
      :name="item.name"
      :price="item.price"
      :key="index"
      @pay="payFn"
    />
    <!-- <Count/>
    
    <Box/>
    <NButton/>
    <n-button/> -->
  </div>
</template>

<script>
import NButton from "./NButton.vue";
import Box from "./Box.vue";
import Count from "./Count.vue";
import GoodsItem from "./GoodsItem.vue";
export default {
  data() {
    return {
      allPrice: 1000,
      list: [
        {
          name: "凉茶",
          price: 18,
        },
        {
          name: "白茶",
          price: 28,
        },
        {
          name: "苦茶",
          price: 38,
        },
      ],
    };
  },
  methods: {
    payFn(val) {
      // 自定义事件触发后，需要做什么事
      if (this.allPrice < val) return alert('余额不足，请充值');
      this.allPrice -= val;
    },
  },
  components: {
    // [NButton.name]:NButton
    NButton,
    Box,
    Count,
    GoodsItem,
  },
};
</script>

<style lang='less' scoped>
.pang1 {
  padding: 10px;
  background: lawngreen;
}
.box {
  width: 100px;
  height: 100px;
  background: yellow;
}
</style>